<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="row">
			<text class="name">选择区域</text>
			<view class="value">
				<Region :defaultValue="defaultValue" @change="onChangeRegion"></Region>
			</view>
			<text class="iconfont right-icon">&#xe63e;</text>
		</view>

	</view>

</template>

<script>
	import Region from '@/components/region/region.vue';
	export default {
		data() {
			return {
				title: '选择地区',
				area: ''
			}
		},
		props: ['defaultValue'],
		components: {
			Region
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
		},

		computed: {

		},

		onLoad: function() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
		},
		methods: {

			onChangeRegion(region) {
				let id = 0;
				let area = '';
				if (region[2].id > 0) {
					id = region[2].id;
					area = region[0].name + region[1].name + region[2].name;
				} else {
					id = region[1].id;
					area = region[0].name + region[1].name;
				}
				this.area = area;
				this.choseArea(id)
			},

			async choseArea(id) {
				let token = uni.getStorageSync('token');
				let dataObj = {
					token: token,
					area: id
				};
				let res = await this.$myRequest({
					url: '/jobarea',
					data: dataObj,
					methods: 'post'
				})

				if (res.data.status == 1) {
					this.$api.msg(res.data.msg, 1000);
					uni.$emit('changeCity', {
						jobarea: this.area
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages2/pages/work/work'
						})
					}, 1000)
				} else {
					this.$api.msg(res.data.msg);
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.row {
		background-color: #fff;
		padding: 200rpx 48rpx 100rpx;
		display: flex;
		height: 350rpx;
		align-items: center;
		color: #040506;
	}

	.row:active {
		opacity: 0.8;
	}

	.name {
		flex-shrink: 0;
	}

	.value {
		flex: 1;
	}

	.right-icon {
		color: #707070;
	}
</style>
